<template>
  <div class="app-container">
    <el-tabs v-model="typeCode" class="demo-tabs" @tab-change="typeCodeChange">
      <el-tab-pane :label="`待审核（${statisticsTotal.showroomPageTotal}）`" name="1"></el-tab-pane>
      <el-tab-pane :label="`待上线（${statisticsTotal.showroomPutShelvesPageTotal}）`" name="2"></el-tab-pane>
    </el-tabs>
    <el-form class="alone-business" :model="query" ref="queryBusinessRef" :inline="true" label-width="68px">
      <el-form-item label="城市筛选">
        <el-cascader
          v-model="query.areaListId"
          :options="area"
          :props="{
            expandTrigger: 'hover',
            value: 'cityCode',
            label: 'name'
          }"
          filterable
          clearable
          style="width: 240px"
        />
      </el-form-item>
      <el-form-item label="展厅名称">
        <el-input v-model="query.showroomName" placeholder="请输入" clearable style="width: 240px"></el-input>
      </el-form-item>
      <el-form-item label="所属租户">
        <el-input v-model="query.tenantName" placeholder="请输入" clearable style="width: 240px"></el-input>
      </el-form-item>
      <template v-if="typeCode == 2">
        <el-form-item label="上样商品">
          <el-form-item prop="date1" style="margin: 0">
            <el-input v-model="query.productStartNum" placeholder="请输入" clearable style="width: 110px"></el-input>
          </el-form-item>
          <span style="display: inline-block; width: 20px; text-align: center">-</span>
          <el-form-item prop="date2" style="margin: 0">
            <el-input v-model="query.productEndNum" placeholder="请输入" clearable style="width: 110px"></el-input>
          </el-form-item>
        </el-form-item>
        <el-form-item label="上样比例">
          <el-form-item prop="date1" style="margin: 0">
            <el-input v-model="query.sampleProportionStartNum" placeholder="请输入" clearable style="width: 110px"></el-input>
          </el-form-item>
          <span style="display: inline-block; width: 20px; text-align: center">-</span>
          <el-form-item prop="date2" style="margin: 0">
            <el-input v-model="query.sampleProportionEndNum" placeholder="请输入" clearable style="width: 110px"></el-input>
          </el-form-item>
        </el-form-item>
      </template>
      <el-form-item>
        <el-button type="primary" icon="Search" @click="searchData">查询</el-button>
        <el-button icon="Refresh" @click="reset">重置</el-button>
      </el-form-item>
    </el-form>

    <el-table v-loading="tableLoading" :data="tableData" highlight-current-row style="width: 100%; margin-top: 20px">
      <el-table-column label="序号" type="index" width="50" />
      <el-table-column property="showroomName" label="展厅名称" width="250" />
      <el-table-column property="areaName" label="所在城市" />
      <el-table-column property="tenantName" label="所属租户" />
      <el-table-column property="pioneeringName" label="开发人员" />
      <el-table-column property="businessHoursInfo" label="营业时间" width="120" />
      <el-table-column property="proportion" label="展厅面积" />

      <el-table-column v-if="typeCode == 1" property="canShowProductNum" label="可展示商品数" width="120" />
      <template v-if="typeCode == 2">
        <el-table-column property="canShowProductNum" label="上样商品总数" width="120" />
        <el-table-column property="sampleProductProportion" label="上样商品比例" width="120" />
      </template>
      <template v-if="tableData[0]" v-for="item in tableData[0].categoryList" :key="item">
        <el-table-column :label="item.categoryName">
          <template #default="scope">
            {{ tableFilter(scope.row, item.categoryName) }}
          </template>
        </el-table-column>
      </template>
      <el-table-column property="createTime" label="创建时间" width="120" />
      <el-table-column fixed="right" label="操作" width="100">
        <template #default="scope">
          <el-button v-if="typeCode == 1" link type="primary" @click="toPath(scope.row)"> 展厅审核 </el-button>
          <el-button v-if="typeCode == 2" link type="primary" @click="toPath(scope.row)"> 发布上线 </el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination :total="listTotal" v-model:page="query.current" v-model:limit="query.size" @pagination="searchData" />
  </div>
</template>
<script setup>
import { showroomPage, showroomPutShelvesPage, showroomWaitExamAndOnlineNums } from "@/api/showRoomManagement/reviewOnline";
import { getArea } from "@/api/index.js";
import { onMounted } from "vue";

defineOptions({
  name: "ReviewOnline"
});

const typeCode = ref("1");

const area = ref([]);

const typeCodeChange = value => {
  reset();
};

const query = ref({
  areaListId: [],
  areaId: "",
  showroomName: "",
  tenantName: "",
  applicant: "",
  productStartNum: "",
  productEndNum: "",
  sampleProportionStartNum: "",
  sampleProportionEndNum: "",
  current: 1,
  size: 10
});
const tableLoading = ref(false);
const tableData = ref([]);
const listTotal = ref(0);

// 查询
const searchData = () => {
  if (query.value.areaListId?.length > 0) {
    query.value.areaId = query.value.areaListId[1];
  }
  pageListJudge();
};

// 搜索重置
const reset = () => {
  query.value = {
    areaListId: [],
    areaId: "",
    showroomName: "",
    tenantName: "",
    applicant: "",
    productStartNum: "",
    productEndNum: "",
    sampleProportionStartNum: "",
    sampleProportionEndNum: "",
    current: 1,
    size: 10
  };
  pageListJudge();
};

// 统计数量
const statisticsTotal = ref({
  showroomPageTotal: 0,
  showroomPutShelvesPageTotal: 0
});

const pageListJudge = () => {
  // let queryData = {
  //   records: {
  //     state: typeCode.value
  //   }
  // };
  tableLoading.value = true;
  if (typeCode.value == 1) {
    showroomPageApi();
  } else if (typeCode.value == 2) {
    showroomPutShelvesPageApi();
  }
};

// 待审核
const showroomPageApi = () => {
  showroomPage(query.value).then(res => {
    tableData.value = res.data.records;
    listTotal.value = res.data.total;
    tableLoading.value = false;
  });
};

// 待上线
const showroomPutShelvesPageApi = () => {
  showroomPutShelvesPage(query.value).then(res => {
    tableData.value = res.data.records;
    listTotal.value = res.data.total;
    tableLoading.value = false;
  });
};

const router = useRouter();
const toPath = row => {
  router.push({
    path: "showRoomDetail",
    query: {
      showroomId: row.showroomId
    }
  });
};

const tableFilter = (row, name) => {
  return row.categoryList.find(item => {
    return item.categoryName == name;
  })?.productNum;
};

// 根据当前标签页获取另外一个标签页的总条数
const listTotalJudge = () => {
  showroomWaitExamAndOnlineNums().then(res => {
    statisticsTotal.value.showroomPageTotal = res.data.waitExamNum;
    statisticsTotal.value.showroomPutShelvesPageTotal = res.data.waitOnlineNum;
  });
};

onActivated(() => {
  pageListJudge();
  listTotalJudge();
});

onMounted(() => {
  getArea().then(res => {
    res.data.forEach(item => {
      item?.children?.forEach(el => {
        el.children = [];
      });
    });
    area.value = res.data;
  });
});
</script>
<style scoped lang="scss"></style>
